import React, {useState} from "react";
import {Layout} from "antd";
import HeaderCustom from "./headerCustom";
import Routes from "../../routes";
import Copyright from "../copyright";
import SiderCustom from "./siderCustom";
import manageMenus from "../../routes/manage.config";
import Loading from "../../components/loading";

const {Content, Footer} = Layout;

/**
 * 核心页面布局组件
 */
const ManageIndex = () => {
    const [collapsed, setCollapsed] = useState<boolean>(false);

    function toggle() {
        setCollapsed(!collapsed);
    }

    return (
        <React.Suspense fallback={<Loading/>}>
            <Layout style={{height: "100%"}}>
                <SiderCustom collapsed={collapsed}/>
                <Layout>
                    <HeaderCustom toggle={toggle}/>
                    <Content style={{margin: '24px 16px 0', background: "#fff"}}>
                        <Routes routesConf={[...manageMenus.menus, ...manageMenus.others]}/>
                    </Content>
                    <Footer>
                        <Copyright/>
                    </Footer>
                </Layout>
            </Layout>
        </React.Suspense>
    );
}

export default ManageIndex;
